<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button icon="el-icon-edit" type="success" @click="$router.push('/questions/new')">新增试题</el-button>
      </div>
      <!-- 表单 -->
      <el-form ref="form" :model="choiceForm" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科" prop="subjectID">
              <el-select
                v-model="choiceForm.subjectID"
                placeholder="请选择"
                @change="subjectChange"
                style="width: 100%"
              >
                <el-option
                  v-for="item in subList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" prop="catalogID">
              <el-select
                v-model="choiceForm.catalogID"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in directoryList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" prop="tags">
              <el-select
                v-model="choiceForm.tags"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in tagList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword">
              <el-input
                v-model.trim="choiceForm.keyword"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionType">
              <el-select
                v-model="choiceForm.questionType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option label="单选" :value="1"></el-option>
                <el-option label="多选" :value="2"></el-option>
                <el-option label="简单" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select
                v-model="choiceForm.difficulty"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option label="简单" :value="1"></el-option>
                <el-option label="一般" :value="2"></el-option>
                <el-option label="困难" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select
                v-model="choiceForm.direction"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option value="o2o"></el-option>
                <el-option value="外包服务"></el-option>
                <el-option value="企业服务"></el-option>
                <el-option value="互联网金融"></el-option>
                <el-option value="企业咨询"></el-option>
                <el-option value="互联网"></el-option>
                <el-option value="电子商务"></el-option>
                <el-option value="其他"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID">
              <el-select
                v-model="choiceForm.creatorID"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in creatorList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input
                v-model.trim="choiceForm.remarks"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input
                v-model.trim="choiceForm.shortName"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" prop="province">
              <el-select
                v-model="choiceForm.province"
                placeholder="请选择"
                style="width: 48%; float: left"
                @change="provinceChange"
              >
                <el-option
                  v-for="item in provinceList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="choiceForm.city"
                placeholder="请选择"
                style="width: 48%; float: right"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="float: right">
              <el-button size="small" @click="resetForm">清除</el-button>
              <el-button size="small" type="primary" @click="search"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 列表区域 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
      </el-tabs>
      <el-alert
        :title="`数据一共${counts}条`"
        type="info"
        :closable="false"
        show-icon
        style="margin-bottom: 20px"
      >
      </el-alert>
      <el-table :data="questions" style="width: 100%">
        <el-table-column
          prop="number"
          label="试题编号"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="subject"
          label="学科"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="catalog"
          label="目录"
          width="100"
        ></el-table-column>
        <el-table-column label="题型" width="80">
          <template v-slot="{ row }">
            {{ questionType.find(item => item.value === +row.questionType).label }}
          </template>
        </el-table-column>
        <el-table-column label="题干" width="180">
          <template v-slot="{ row }">
            <div v-html="row.question"></div>
          </template>
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="录入时间"
          width="180"
          :formatter="formatTime"
        ></el-table-column>
        <el-table-column label="难度" width="80">
          <template v-slot="{ row }">
            {{ difficulty.find(item => item.value === +row.difficulty).label }}
          </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人"
          width="100"
        ></el-table-column>
        <el-table-column label="审核状态" width="80">
          <template v-slot="{ row }">
            {{ chkType.find(item => item.value === +row.chkState).label }}
          </template>
        </el-table-column>
        <el-table-column
          prop="chkRemarks"
          label="审核意见"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="chkUser"
          label="审核人"
          width="100"
        ></el-table-column>
        <el-table-column label="发布状态" width="80">
          <template v-slot="{ row }">
            {{ publishType.find(item => item.value === +row.publishState).label }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="240" align="center">
          <template v-slot="{ row }">
            <el-button type="text" @click="openPreview(row)">预览</el-button>
            <el-button type="text" :disabled="+row.chkState!==0" @click="showCheckDialog(row)">审核</el-button>
            <el-button type="text" :disabled="+row.publishState===1" @click="$router.push(`/questions/new?id=${row.id}`)">修改</el-button>
            <el-button type="text" @click="togglePublish(row)">{{ +row.publishState === 1 ? '下架' : '上架' }}</el-button>
            <el-button type="text" :disabled="+row.publishState===1" @click="delQs(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination
          style="margin-top: 10px"
          background
          :page-size="choiceForm.pagesize"
          :current-page="choiceForm.page"
          layout="prev, pager, next, sizes, jumper"
          :total="counts"
          :page-sizes="[5, 10]"
          @size-change="changeSize"
          @current-change="changePage"
        >
        </el-pagination>
      </el-row>
      <!-- 预览dialog -->
      <QuestionPreview :showQsPreview.sync="showQsPreview" :qsInfo="qsInfo" />
      <!-- 审核 -->
      <el-dialog title="题目审核" :visible.sync="showCheck" width="400px">
        <el-form size="small">
          <el-form-item>
            <el-radio :label="1" v-model="qsInfo.chkState">通过</el-radio>
            <el-radio :label="2" v-model="qsInfo.chkState">拒绝</el-radio>
          </el-form-item>
          <el-form-item>
            <el-input type="textarea" v-model.trim="qsInfo.chkRemarks" placeholder="请输入审核意见"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="showCheck=false">取消</el-button>
          <el-button @click="confirmCheck" type="primary">确认</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { simple as directorySimple } from '@/api/hmmm/directorys'
import { simple as tagSimple } from '@/api/hmmm/tags'
import { simple as userSimple } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import { choice, choiceCheck, choicePublish, remove } from '@/api/hmmm/questions'
import moment from 'moment'
import QuestionPreview from '@/module-hmmm/components/questions-preview-cy.vue'
import {
  difficulty,
  questionType,
  chkType,
  publishType
} from '@/api/hmmm/constants'
export default {
  components: {
    QuestionPreview
  },
  data () {
    return {
      choiceForm: {
        // 不传的数据设为''会有问题, 直接设为null
        subjectID: null, // 选中学科值
        catalogID: null, // 选中二级目录值
        tags: '', // 选中标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 企业所在地省份
        city: '', // 企业所在城市
        page: 1,
        pagesize: 5,
        chkState: null
      },
      subList: [], // 学科简单列表
      directoryList: [], // 二级目录简单列表
      tagList: [], // 标签简单列表
      creatorList: [], // 录入人列表
      provinceList: provinces(), // 省份列表
      cityList: [], // 对应省份城市列表
      activeName: 'all',
      counts: 0, // 总数
      questions: [], // 题库列表
      difficulty,
      questionType,
      chkType,
      publishType,
      showQsPreview: false,
      qsInfo: {},
      showCheck: false
    }
  },
  created () {
    this.getSubjectSimple()
    this.search()
  },
  methods: {
    // 获取学科简单列表
    async getSubjectSimple () {
      const { data } = await simple()
      this.subList = data
    },
    // 学科下拉框的值发生变化
    async subjectChange (value) {
      // 获取二级目录列表
      const { data } = await directorySimple({ subjectID: value })
      this.directoryList = data
      // 获取标签列表
      const res = await tagSimple({ subjectID: value })
      this.tagList = res.data
      // 获取用户列表-录入人
      const res2 = await userSimple()
      this.creatorList = res2.data
    },
    // 城市下拉框值发送变化
    provinceChange (value) {
      // 获取对应地区列表
      this.choiceForm.city = ''
      this.cityList = citys(value)
    },
    // 重置按钮
    resetForm () {
      this.$refs.form.resetFields()
      this.choiceForm.city = '' // 城市与省份共用一个item只能重置掉一个
      this.cityList = []
      this.directoryList = []
      this.tagList = []
    },
    // 搜索
    async search () {
      const res = await choice(this.choiceForm)
      this.counts = res.data.counts
      this.questions = res.data.items
    },
    changeSize (pagesize) {
      this.choiceForm.pagesize = pagesize
      this.search()
    },
    changePage (page) {
      this.choiceForm.page = page
      this.search()
    },
    formatTime (row, column, cellValue, index) {
      return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
    },
    handleClick () {
      this.choiceForm.page = 1
      this.choiceForm.chkState = this.activeName === 'all' ? null : this.activeName
      this.search()
    },
    openPreview (row) {
      this.qsInfo = { ...row }
      this.showQsPreview = true
    },
    showCheckDialog (row) {
      this.qsInfo = { ...row }
      this.qsInfo.chkState = 1
      this.showCheck = true
    },
    async confirmCheck () {
      if (!this.qsInfo.chkRemarks) return this.$message.warning('请输入审核意见')
      await choiceCheck({
        id: this.qsInfo.id,
        chkState: this.qsInfo.chkState,
        chkRemarks: this.qsInfo.chkRemarks
      })
      this.$message.success('操作成功')
      this.showCheck = false
      this.search()
    },
    async togglePublish (row) {
      try {
        await this.$confirm(`您确认${row.publishState === 1 ? '下架' : '上架'}这道题目吗?`, '提示', {
          type: 'warning'
        })
      } catch {
        return false
      }
      const publishState = row.publishState === 1 ? 0 : 1
      await choicePublish({
        id: row.id,
        publishState
      })
      this.$message.success(`${row.publishState === 1 ? '下架' : '上架'}成功`)
      this.search()
    },
    async delQs (row) {
      try {
        await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', { type: 'warning' })
      } catch {
        return false
      }
      await remove({ id: row.id })
      this.$message.success('删除成功')
      this.search()
    }
  }
}
</script>

<style scoped lang="less">
.container {
  padding: 10px;
}
::v-deep {
  .el-card__header {
    border-bottom: none;
    .clearfix {
      display: flex;
      justify-content: flex-end;
    }
  }
}
.el-form {
  margin-bottom: 20px;
}
</style>
